<template>
     <div class="ce">
        <div class="shoping">
            <div class="xq">
            <img src="../../public/assets/akf.webp">
            </div>
        
        <div class="discount">
            <div class="price">
                <span class="zhehoujia">￥259</span><br>
                <span class="yuanjia">￥499</span><span>5.2折</span>
            </div>
            <div class="shenghuoguan">
                <img src="../../public/assets/shenghuoguan.webp" alt="">
            </div>
        </div>
        <div class="mingchen">
            <span class="biaoti">adidas NEO | 春季新款轻便耐磨低帮男女休闲鞋<br>男鞋女鞋运动鞋情侣鞋训练跑步黑</span>
            <div class="green">
                <span>7天可退</span><span>首单30元免邮</span><span>上门退款</span>
            </div>
        </div>
        <div class="zhengpin">
            <img src="../../public/assets/zhengpin.webp" alt="">
            <span>100%正品·专业鉴定·正品险</span>
            <span class="jiantou">></span>
        </div>
        </div>
        <div class="bottom">
            <div class="tubiao">
                <img src="../../public/assets/kefu.png" alt=""><br><span>客服</span>
            </div>
            <div class="tubiao">
                <img src="../../public/assets/gouwuche.png" alt=""><br><span>购物车</span>
            </div>
            <div class="count">
                <div class="jiage1">
                    <span>￥499</span>
                </div>
                <div class="jiage2">
                    <div class="pri">
                    <span>￥259 </span>
                    </div>
                    <div class="pri2">
                    <span>特卖价 抢</span>
                    <img src="../../public/assets/jiantou.png" alt="">
                    </div>
                </div>
            </div>
        </div>
     </div>
 
</template>

<script>
export default {
  name: 'BodyBase',
  props: {
  }
}
</script>
<style scoped>
ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    border-left: 2px solid #ddd;
}
.xq img {
    width: 100%;

}
.ce {
    width: 100%;
    background-color: #F3F4F5;
}
.discount {
    width: 100%;
    height: 90px;
    background-color: antiquewhite;
    background-image: url(../../public/assets/beijing.webp);
    background-size: 460px 90px;
    display: flex;
    justify-content:space-between;
}
.price {
    color: #fff;
    margin: 13px 20px;
}
.price .zhehoujia {
    font-size: 30px;
}
.price .yuanjia {
    text-decoration:line-through;
    margin-right: 10px;
}
.shenghuoguan img {
    width: 85px;
    margin: 30px 15px;
}

.mingchen {
    width: 426px;
    height: 102px;
    padding: 10px 20px;
    background-color: #fff;
}
.mingchen .biaoti {
    color: #222;
    font-size: 19.5px;
}   
.green {
    margin-top: 8px;
}
.green span {
    width: 63px;
    height: 19px;
    background-color: #36C88E;
    color: #fff;
    font-size: 12px;
    margin-right: 10px;
    padding: 5px 8px;
    border-radius: 10%;
}

.zhengpin {
    width: 422px;
    height: 25px;
    background-color: #fff;
    margin: 15px 0;
    padding: 22px;
}
.zhengpin img {
    width: 90px;
    height: 17px;
    margin-right: 20px;
}
.zhengpin span {
    color: #585c64;
    font-size: 15px;
}
.jiantou {
    margin-left: 115px;
}

.bottom {
    width: 100%;
    height: 79px;
    background-color: #fff;
    display: flex;
    padding-top: 8px;
    /* justify-content: space-between; */
}
.count {
    display: flex;
}
.tubiao {
    margin-left: 20px;
    margin-top: 8px;
}
.tubiao img {
    width: 27px;
    height: 27px;
}
.jiage1 {
    width: 145px;
    height: 72px;
    background-color: #F688A4;
    border-radius: 10px 0 0 10px;
    margin-left: 55px;
    font-size: 24.5px;
    color: #fff;
    text-decoration: line-through;
    
}
.jiage1 span {
    margin-left: 30px;
    line-height: 70px;
}
.jiage2 {
    width: 145px;
    height: 72px;
    background-color: #F03867;
    border-radius: 0 10px 10px 0;
}
.jiage2 .pri {
    font-size: 24.5px;
    color: #fff;
    /* text-align: center; */
    /* vertical-align: middle; */
    margin: 10px 37px;
}
.jiage2 .pri2 {
    font-size: 17px;
    color: #fff;
    margin-left: 30px;
    margin-top: -15px;
}
.jiage2 .pri2 img {
    width: 15px;
}
</style>
